<template>
  <div class="swiper">
    <swiper
      :modules="modules"
      :slides-per-view="1"
      :space-between="50"
      :loop="true"
      :autoplay="true"
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: true }"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide :width="200" v-for="data in picturedata"
        ><img
          :src="data"
      /></swiper-slide>
    
    </swiper>
  </div>
</template>

<script>
// import Swiper core and required modules
import { Autoplay, Pagination, Scrollbar, A11y } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";
import "swiper/css/autoplay";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import axios from "axios";
export default {
  data(){
  return{
    picturedata:[]
  }
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper) => {};
    const onSlideChange = () => {};
    return {
      onSwiper,
      onSlideChange,
      modules: [Autoplay, Pagination, Scrollbar, A11y],
    };
  },
  created() {
    axios
      .get(
     '/商城数据-图片-介绍.json' ).then(res =>{this.picturedata = res.data.slice(5,10).map(res => res.goods_logo)}
      )
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  width: 100%;
  height: 200px;
  img {
    width: 100%;
    height: 200px;
  }
}
</style>
